<template>
  <div id="detail">
    <h2 style="margin-top: 20px">罕王设备维修维护计划</h2>
    <el-card shadow="hover" style="margin-top: 50px; margin-left: 10%; width: 80%; min-height: 300px">
<!--      //有数据时，显示-->

      <div v-if="res1_sign==true">

        <el-descriptions class="margin-top" title="" :column="2" size="medium" border>

<!--          <el-descriptions-item>-->
<!--            <template slot="label">-->
<!--              <i class="el-icon-user"></i>-->
<!--              序号-->
<!--            </template>-->
<!--            kooriookami-->
<!--          </el-descriptions-item>-->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              故障现象
            </template>
            {{resDate.Phenomenon}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              故障所处位置
            </template>
            {{resDate.Phenomenon_Location}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              故障原因
            </template>
            {{resDate.Describe}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              维修所需物料
            </template>
            <el-tag size="small">{{resDate.Material}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              维护方案
            </template>
            {{resDate.Method}}
          </el-descriptions-item>

        </el-descriptions>
      </div>
<!--      //无数据时，显示-->
      <el-empty v-else description="暂无内容"></el-empty>

<!--      <div class="content" @click="showImgViewer">-->
<!--        <img :src="Img" alt="" style="height: 300px">-->
<!--      </div>-->
<!--      <el-image-viewer-->
<!--          v-if="imgViewerVisible"-->
<!--          :on-close="closeImgViewer"-->
<!--          :url-list="imgList" />-->

    </el-card>
    <el-button type="primary" style="margin-top: 20px" @click="clickEnd">维修结束</el-button>
  </div>
</template>

<script>
import {request} from "../../network/2";
import {request1} from "../../network/1";

export default {
  name: "detail",
  data(){
    return{
      getData:[],
      Img: require("../../assets/ft.png"),
      imgViewerVisible:false,
      imgList: []
    }
  },
  components:{
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  methods:{
    clickEnd(){
      this.Record()
      this.$alert('维修结束，相关记录已保存，系统已自动跳转至首页', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: '弹框已关闭'
          });
        }
      });
      this.$router.push({name: "home"})
    },
    showImgViewer(){
      this.imgViewerVisible = true;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动

    },
    closeImgViewer(){
      this.imgViewerVisible = false;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
    async Record(){
      let res = await request("/addrecord",
          {phenomenon: this.$store.state.res1.payload.Phenomenon,
          cause:this.$store.state.res1.payload.Describe,
          result:this.$store.state.res1.payload.Method,
            location:this.$store.state.res1.payload.Phenomenon_Location,
          material:this.$store.state.res1.payload.Material}
          )
      console.log(res);
    }
  },
  created() {
    request1('/bb').then((res) => {
      let url = window.URL.createObjectURL(res.data);//这里请求接收的一定是Blod类型数据
      this.imgList = [url]
      // console.log(this.imgList);
    })
  },
  computed:{
    resDate(){
      console.log(this.$store.state.res1);
      return this.$store.state.res1.payload
    },
    res1_sign(){
      return this.$store.state.res1_sign
    }
  }
}
</script>

<style scoped>

</style>